<script setup lang="ts">
import { ref, reactive, computed, watch } from "vue";
import PicUpload from "@/components/base-ui/editor/picUpload.vue";
import { getqualityandreliability, changequalityandreli } from '@/api/qualityreliability'
import { message } from "@/utils/message";
import type { FormInstance, FormRules, UploadProps, UploadUserFile, UploadInstance, UploadRawFile } from 'element-plus'
import { getPicImg, uploadUrl, getimgdata, geturlneeddl } from '@/api/upload'
import { getStorage } from '@/utils/storage'
import uploadFiles from '@/components/base-ui/uploadFiles'


defineOptions({
  name: "Editor"
});

const token = getStorage('token')
const upload = ref<UploadInstance>()

const isShowUpLoader = ref(false)
const ImgOptions = ref({
  img: '',
  imgWidth: '',
  imgHeight: '',
  children: [],
})
const itemOptions = ref(null)


const onSuccessFn: UploadProps['onSuccess'] = (uploadFile, uploadFiles) => {
  ImgOptions.value.img = uploadFile.data.result[0].uuid
  isShowUpLoader.value = true
}


const activeNames = ref('');
const id = ref('');
const updatelValFn = (e) => {
  activeNames.value = e
}

const tapSave = () => {
  changequalityandreli({
    description: activeNames.value,
    "id": id.value,
    imageinfo: JSON.stringify(ImgOptions.value)
  }
  ).then(res => {
    message("修改成功", {
      type: "success"
    });
  })
}

const loading = ref(false)
const getData = () => {
  loading.value = true
  getqualityandreliability().then(res => {
    res.result.forEach(e => {
      if (e.name === '可靠性项目') {
        activeNames.value = e.description
        id.value = e.id
        if (e.imageinfo) {
          ImgOptions.value = JSON.parse(e.imageinfo)
          console.log(ImgOptions.value, 'ImgOptions.value')
          isShowUpLoader.value = true
        }
      }
    });
  }).finally(() => {
    loading.value = false
  })
}

getData()

const imgStyle = computed(() => {
  let a = ''
  let b = ''
  if (ImgOptions.value.imgWidth) {
    a = `width:${ImgOptions.value.imgWidth}px;`
  }
  if (ImgOptions.value.imgHeight) {
    b = `height:${ImgOptions.value.imgHeight}px;`
  }
  return a + b
})



const resize = (e, item) => {
  console.log('resize')
  item.isActive = true
  item.w = e.width
  item.h = e.height
}

const upDataLoad = ref(true)
const dragging = (e, item) => {
  console.log('dragging', ImgOptions.value)
  if (itemOptions.value && item.id != itemOptions.value.id) {
    upDataLoad.value = false
  }
  item.isActive = true
  item.lefts = e.left
  item.top = e.top
  itemOptions.value = item
  setTimeout(() => {
    upDataLoad.value = true
  }, 300)
}
const delFKImg = (index) => ImgOptions.value.children.splice(index, 1)

const addzbxx = () => {
  ImgOptions.value.children.push({
    h: 50,
    w: 50,
    lefts: 0,
    top: 0,
    textContent: '',
    textColor: '',
    link: '',
    linkType: 1,
    textFont: 14,
    linklist: [],
    article: '',
    explain: '',
    id: new Date().getTime(),
    isActive: true,
  })
}


const confirmFn = () => {
  ImgOptions.value.imgWidth = ''
  ImgOptions.value.imgHeight = ''
  ImgOptions.value.img = ''
  ImgOptions.value.children = []
  isShowUpLoader.value = false
}


const successSize = (size) => {
  console.log(size, 'size')
}
const onPreviewFNother = (e) => {
  window.open(geturlneeddl(e))
}

const beforeRemove = () => {
  console.log('yichu')
  itemOptions.linklist = []
}

watch(
  () => ImgOptions.value,
  (newValue, oldValue) => {
    console.log(newValue, 'newValue')
  }
)
</script>

<template>
  <div v-loading="loading" class="pb-[100px]">
    <el-card shadow="never" v-if="!loading">
      <PicUpload :htmlVal="activeNames" @updatelVal="updatelValFn" />
    </el-card>




    <el-card shadow="never" class='mt-[20px]  min-w-[1353px]  overflow-x-auto'>
      <div class='w-full h-[586px] flex justify-center items-center'>
        <template v-if="isShowUpLoader">
          <div class="w-full h-full mr-[20px]">
            <div class='w-[741px] h-[600px]  relative flex justify-center items-center'>
              <img :style="imgStyle" class="w-full h-full" :src="getPicImg(ImgOptions.img)" alt="" />


              <div class="absolute top-0 bottom-0 left-0 right-0">
                <vue-drag-resize :isActive="item.isActive" :isDraggable="true" :isResizable="true"
                  v-on:resizing="resize($event, item)" v-on:dragging="dragging($event, item)" :aspectRatio='false'
                  :parentLimitation="true" :minh="10" :minw="10" :z="9999999999999" :x="item.lefts" :y="item.top"
                  :w="item.w" :h="item.h" v-for="(item, index) in  ImgOptions.children " :key="item.id">
                  <div class="whitespace-nowrap hover:cursor-move flex justify-start items-center px-[7px]"
                    style="background: rgba(0, 175, 18, 0.05);border: 1px solid #00AF12;opacity: 1;white-space: pre-line;"
                    :style="'width:' + item.w + 'px;height:' + item.h + 'px;fontSize:' + item.textFont + 'px;color:' + item.textColor">
                    <div v-html="item.textContent" style='white-space: pre-line;'></div>
                  </div>
                  <div class="w-[20px] h-[20px] mt-[10px]" v-if="item.isActive" @click="delFKImg(index)">
                    <img class="no_dragImg cursor-pointer" src="@/assets/product/del.png" alt="">
                  </div>
                </vue-drag-resize>
              </div>




            </div>
          </div>

          <div class='min-w-[528px] overflow-auto' style='align-self:stretch'>
            <div class='h-full overflow-auto'>
              <el-row class='mb-[10px]'>
                <el-col>
                  <el-popconfirm title="将重置所有内容?" @confirm='confirmFn'>
                    <template #reference>
                      <el-button type="info" @click=''>重置</el-button>
                    </template>
                  </el-popconfirm>
                </el-col>
              </el-row>
              <input type="text">

              <el-row class='mb-[10px]'>
                <el-col><el-button type="primary" @click='addzbxx'>添加文字</el-button></el-col>
              </el-row>

              <el-row class='mb-[10px]'>
                <el-col>
                  <span class='text-[16px]'>图片信息信息：</span>
                </el-col>
              </el-row>

              <el-row class='mb-[10px]'>
                <el-col>
                  <el-input v-model="ImgOptions.imgWidth" placeholder="图片宽度" />
                </el-col>
              </el-row>
              <el-row class='mb-[10px]'>
                <el-col>
                  <el-input v-model="ImgOptions.imgHeight" placeholder="图片高度" />
                </el-col>
              </el-row>


              <template v-if="itemOptions != null">
                <el-row class='mb-[10px]'>
                  <el-col>
                    <span class='text-[16px]'>当前节点信息：</span>
                  </el-col>
                </el-row>


                <el-form-item label="标题">
                  <el-input v-model="itemOptions.textContent" autosize type="textarea" placeholder="文字信息" />
                </el-form-item>
                <el-form-item label="简介">
                  <el-input v-model="itemOptions.explain" autosize type="textarea" placeholder="文字信息" />
                </el-form-item>

                <el-form-item label="文字颜色">
                  <el-color-picker v-model="itemOptions.textColor" />
                </el-form-item>

                <el-form-item label="文字大小">
                  <el-input-number v-model="itemOptions.textFont" :min="10" :max="50" />
                </el-form-item>



                <el-form-item label="链接">
                  <el-input v-model="itemOptions.link" placeholder="链接" />
                </el-form-item>

                <el-form-item label="知识库文章">
                  <el-input v-model="itemOptions.article" placeholder="文章" />
                </el-form-item>

                <el-form-item label="文件" v-if='upDataLoad'>
                  <uploadFiles type="otherFilter" v-model="itemOptions.linklist" @onPreviewFn="onPreviewFNother">
                  </uploadFiles>
                </el-form-item>
              </template>

            </div>
          </div>
        </template>
        <template v-else>
          <el-upload ref="upload" class="w-full max-w-[968px]" name="fileUpload" drag :data="{ ispic: '0' }" :headers="{
    token
  }
    " :limit="1" :show-file-list="false" :action="uploadUrl" multiple :on-success="onSuccessFn">
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              Drop img here or <em>click to upload</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                <!-- 请上传基于800*600基数的图片 -->
              </div>
            </template>
          </el-upload>
        </template>



      </div>
    </el-card>


    <div class="flex justify-end pr-[50px]">
      <el-button type="success" class="mt-[30px]" @click="tapSave">保存</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:focus {
  outline: 0;
  border-color: #2260ff;
  box-shadow: 0 0 0 4px #b5c9fc;
}

.mydict div {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  justify-content: center;
}

.mydict input[type="radio"] {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.mydict input[type="radio"]:checked+span {
  box-shadow: 0 0 0 0.0625em #0043ed;
  background-color: #dee7ff;
  z-index: 1;
  color: #0043ed;
}

label span {
  display: block;
  cursor: pointer;
  background-color: #fff;
  padding: 0.375em .75em;
  position: relative;
  margin-left: .0625em;
  box-shadow: 0 0 0 0.0625em #b5bfd9;
  letter-spacing: .05em;
  color: #3e4963;
  text-align: center;
  transition: background-color .5s ease;
}

label:first-child span {
  border-radius: .375em 0 0 .375em;
}

label:last-child sect {
  border-radius: 0 .375em .375em 0;
}
</style>
